<template>
	<view class="u-p-b-40">
		<u-navbar title-color="#333" title-bold title-size="36" title="签到" :border-bottom="false"
			:background="{backgroundColor: '#FEF1E2'}"></u-navbar>
		<view class="top-div">
			<image class="jifen-img" src="../../static/img/mine/qd-bg.png" mode=""></image>
			
		</view>
		<view class="jfhl u-p-b-32" style="margin-top: -120rpx;">
			<view class="text_center">
				<view class="jpls-text">
					恭喜签到成功，获得 <span style="color: #FF6F00;">{{qdList.jifen}}</span> 积分
				</view>
			</view>
			<view class="font_16_333 u-m-t-28 text_center">
				你已连续签到  <span class="font_weight u-font-40" style="color: #FF6F00;">{{qdList.days}}</span> 天
			</view>
			<scroll-view scroll-x="true" >
				<view class="qd-div flex">
					<view class="qd-d" v-for="(item,index) in yuelist" :key="index">
						<view class="qd-item" :class="item.status==1?'qd-item-sel':''" >
							<view class="font_12_333">
								+1
							</view>
							<image v-if="item.status==1" class="qd-1" src="../../static/img/mine/qd-1.png" mode=""></image>
							<image v-else class="qd-1" src="../../static/img/mine/qd-2.png" mode=""></image>
						</view>
						
						<view class="font_10_333 u-m-t-16 text_center">
							{{item.time.substring(5,10)}}
						</view>
					</view>
					
				</view>
			</scroll-view>
			
		</view>
		<view class="jfhl u-m-t-20 u-p-b-32">
			<view class="jpls-top">
				<image class="jpls-ng" src="../../static/img/home/jifen-t-b.png" mode="aspectFill"></image>
				<view class="jpls-text">
					积分好礼
				</view>
			</view>
			<view class="hl-div flex flex_sb flex_wrap">
				<view class="hl-item" v-for="(item,index) in jifenlist" :key="index" v-if="index<4">
					<image class="hl-img" :src="item.thumb" mode="aspectFill"></image>
					<view class="hl-td u-m-t-26">
						<view class="hl-title">
							{{item.title}}
						</view>
						<view class="flex flex_sb u-m-t-10">
							<view class="">
								<span class="hl-num">{{item.jifen}}</span>
								<span class="hl-jf">积分</span>
							</view>
							<view class="hl-btn" @click="duihuan(item.id)">
								立即兑换
							</view>
						</view>
					</view>
				</view>
				<view class="jfsc" @click="toJfshop">
					<image class="jifen-img" src="../../static/img/home/jifen-img.png" mode=""></image>
					<view class="jfsc-main">
						<view class="font_16_333 font_weight">
							前往积分兑换商城
						</view>
						<view class="font_10_333 u-m-t-16">
							积分当钱花，好礼享不停
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="jfhl u-m-t-20 u-p-b-32">
			<view class="font_weight font_16_333">
				赚取积分
			</view>
			<view class="zjf-div u-m-t-20">
				<view class="zjf-item flex flex_sb">
					<view class="flex">
						<image class="qd-icon" src="../../static/img/mine/qd1.png" mode=""></image>
						<view class="u-m-l-20">
							<view class="font_weight">
								每日签到
							</view>
							<view class="font_12_999 u-m-t-10">
								连续签到有奖励
							</view>
						</view>
					</view>
					<view class="zjf-btn1">
						已完成
					</view>
				</view>
				<view class="zjf-item flex flex_sb">
					<view class="flex">
						<image class="qd-icon" src="../../static/img/mine/qd2.png" mode=""></image>
						<view class="u-m-l-20">
							<view class="font_weight">
								邀请新用户
							</view>
							<view class="font_12_999 u-m-t-10">
								每邀请1个新用户，积分+100
							</view>
						</view>
					</view>
					<view class="zjf-btn1 zjf-btn2" @click="tode(1)">
						去邀请
					</view>
				</view>
				
				
				<view class="zjf-item flex flex_sb" v-if="type==1">
					<view class="flex">
						<image class="qd-icon" src="../../static/img/mine/qd3.png" mode=""></image>
						<view class="u-m-l-20">
							<view class="font_weight">
								购买课程
							</view>
							<view class="font_12_999 u-m-t-10">
								积分+100
							</view>
						</view>
					</view>
					<view class="zjf-btn1 zjf-btn2" @click="tode(2)">
						去购买
					</view>
				</view>
				<view class="zjf-item flex flex_sb" v-if="type==1">
					<view class="flex">
						<image class="qd-icon" src="../../static/img/mine/qd4.png" mode=""></image>
						<view class="u-m-l-20">
							<view class="font_weight">
								购买AI助手
							</view>
							<view class="font_12_999 u-m-t-10">
								积分+100
							</view>
						</view>
					</view>
					<view class="zjf-btn1 zjf-btn2"  @click="tode(3)">
						去购买
					</view>
				</view>
				
				<!-- 律师起 -->
				<view  v-if="type==2">
					<view class="zjf-item flex flex_sb" >
						<view class="flex">
							<image class="qd-icon" src="../../static/img/lawyerVersion/qd5.png" mode=""></image>
							<view class="u-m-l-20">
								<view class="font_weight">
									上传成交订单
								</view>
								<view class="font_12_999 u-m-t-10">
									律师上传成交订单，积分+100
								</view>
							</view>
						</view>
						<view class="zjf-btn1 zjf-btn2" @click="tode(5)">
							去上传
						</view>
					</view>
					<view class="zjf-item flex flex_sb">
						<view class="flex">
							<image class="qd-icon" src="../../static/img/lawyerVersion/qd6.png" mode=""></image>
							<view class="u-m-l-20">
								<view class="font_weight">
									发布图文或视频
								</view>
								<view class="font_12_999 u-m-t-10">
									积分+20
								</view>
							</view>
						</view>
						<view class="zjf-btn1 zjf-btn2" @click="tode(6)">
							去发布
						</view>
					</view>
					<view class="zjf-item flex flex_sb">
						<view class="flex">
							<image class="qd-icon" src="../../static/img/lawyerVersion/qd7.png" mode=""></image>
							<view class="u-m-l-20">
								<view class="font_weight">
									购买资源包
								</view>
								<view class="font_12_999 u-m-t-10">
									积分+100
								</view>
							</view>
						</view>
						<view class="zjf-btn1 zjf-btn2" @click="tode(7)">
							去购买
						</view>
					</view>
				</view>
				<!-- 律师终 -->
				
				
				
				
				<view class="zjf-item flex flex_sb">
					<view class="flex">
						<image class="qd-icon" src="../../static/img/mine/qd5.png" mode=""></image>
						<view class="u-m-l-20">
							<view class="font_weight">
								升级会员
							</view>
							<view class="font_12_999 u-m-t-10">
								升级会员最高可获得300积分
							</view>
						</view>
					</view>
					<view class="zjf-btn1 zjf-btn2" @click="tode(4)">
						去升级
					</view>
				</view>
			</view>
		</view>
	
		<view class="u-m-t-20 u-p-l-32">
			<view class="flex ">
				<view class="xshutiao"></view>
				<view class="font_16_333 font_weight u-m-l-16">
					积分规则
				</view>
			</view>
			<view class="gz-div u-padding-24 u-m-t-20">
				
				<rich-text :nodes="yhrichText" v-if="type==1"></rich-text>
				
				<rich-text :nodes="lvrichText" v-if="type==2"></rich-text>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import { formatRichText } from '@/static/richText.js'
	export default {
		data() {
			return {
				qdList:[],
				yuelist:[],
				type:1,//1用户 2律师
				yhrichText:'',
				lvrichText:'',
				jifenlist:[]
			}
		},
		
		onLoad(e) {
			this.type = e.type
			this.getguize()
			this.qiandao()
			
			this.jflist()
		},
		methods: {
			toJfshop(){
				uni.navigateTo({
					url:"/pages/mine/jifenShop?type="+this.type
				})
			},
			jflist(){
				this.$api({
					url: '/getProductList',
					method: 'get',
					data: {
						type: this.type, //1用户积分商品 2律师积分商品
					},
				}).then(res => {
					if (res.code == 1) {
						this.jifenlist = res.data.list
					}
				})
			},
			getguize() {
				this.$api({
					url: '/getPage',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						id:40
					},
				}).then(res => {
					if (res.code == 1) {
						this.yhrichText = formatRichText(res.data.content)
					}
				})
				
				this.$api({
					url: '/getPage',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						id:41
					},
				}).then(res => {
					if (res.code == 1) {
						this.lvrichText = formatRichText(res.data.content)
					}
				})
			},
			qiandaoList(){
				this.$api({
					url: '/sign_list',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.yuelist = res.data.list
						
					}
				})
			},
			qiandao(){
				this.$api({
					url: '/qiandao',
					method: 'post',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.qdList = res.data
						this.qiandaoList()
					}
				})
			},
			tode(e){
				if(e==1){
					uni.navigateTo({
						url:"/pages/mine/yaoqing"
					})
				}
				if(e==2){
					// uni.navigateTo({
					// 	url:"/pages/mine/yaoqing"
					// })
				}
				if(e==3){
					uni.navigateTo({
						url:"/pages/mine/AIpay"
					})
				}
				if(e==4){
					uni.navigateTo({
						url:"/pages/mine/member"
					})
				}
				
				if(e==5){
					uni.navigateTo({
						url:"/subPackageA/pages/lawyerVersion/staging/staging"
					})
				}
				
				if(e==6){
					uni.navigateTo({
						url:"/subPackageA/pages/lawyerVersion/mine/addfahai"
					})
				}
				
				if(e==7){
					uni.navigateTo({
						url:"/subPackageA/pages/lawyerVersion/mine/chongzhiCenter"
					})
				}
				
			},
			
			duihuan(e){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认兑换吗',
					success: function(res) {
						if (res.confirm) {
							that.$api({
								url: '/addUserJifen',
								method: 'post',
								data: {
									id: e, 
									token:uni.getStorageSync("token")
								},
							}).then(res => {
								uni.navigateTo({
									url:"/pages/mine/jifenSuccess?type="+that.type
								})
							})
							
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.xshutiao{
		width: 8rpx;
		height: 24rpx;
		background: #C39653;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
	.gz-div{
		width: 686rpx;
		// height: 370rpx;
		background: #FFFBF6;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #FCF4E9;
	}
	.zjf-div{
		
		.zjf-item{
			width:100%;
			padding: 28rpx 0;
			.qd-icon{
				width: 72rpx;
				height: 72rpx;
			}
			.zjf-btn1{
				width: 120rpx;
				height: 56rpx;
				background: #FFFFFF;
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				border: 2rpx solid #CCCCCC;
				font-size: 24rpx;
				color: #999999;
				text-align: center;
				line-height: 56rpx;
			}
			.zjf-btn2{
				color: #713005;
				background: linear-gradient( 177deg, #FFF7EA 0%, #ECA561 100%);
				border-style: none;
			}
		}
	}
	.jfsc{
		width: 638rpx;
		height: 114rpx;
		background: linear-gradient( 180deg, #FFF3E0 0%, #FFE0BF 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx 48rpx;
		position: relative;
		
		.jifen-img{
			width: 134rpx;
			height: 114rpx;
			position: absolute;
			right: 48rpx;
			top: 0;
		}
	}
	.qd-div{
		.qd-d{
			width: 74rpx;
			margin-right: 16rpx;
		}
		.qd-item{
			width: 74rpx;
			height: 112rpx;
			background: #F5F7F9;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			text-align: center;
			padding: 24rpx 0;
			
			margin-top: 18rpx;
			
			&2{
				width: 300rpx;
			}
			&-sel{
				background: linear-gradient( 180deg, #FFE7CB 0%, #FFD09B 100%);
				
			}
			.qd-1{
				width: 64rpx;
				height: 64rpx;
				margin: 0 auto;
			}
		}
	}
	.top-div {
		width: 750rpx;
		height: 330rpx;
		
		background: linear-gradient( 180deg, #FEF1E2 0%, #FFF1E1 59%, rgba(254,241,226,0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: relative;
		.jifen-img{
			width: 100%;
			height: 780rpx;
			position: absolute;
			right: 0;
			top: 0;
			left:0;
		}
		.jf-div{
			padding: 18rpx 52rpx;
		}
		.jf-num{
			font-weight: bold;
			font-size: 56rpx;
			color: #333333;
		}
		.jf-t{
			color: #FF5300;
			text-decoration-line: underline;
		}
	}
	.jfhl{
		width: 686rpx;
		margin: 0 auto;
		// margin-top: -120rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding:0 24rpx;
		position: relative;
		z-index: 2;
		padding-top: 32rpx;
		
		.jpls-top {
			margin: 0 auto;
			position: relative;
			width: 280rpx;
			height: 35rpx;
		
			.jpls-ng {
				width: 280rpx;
				height: 35rpx;
				position: absolute;
				left: 0;
				top: 20rpx;
			}
		
			
		}
		.jpls-text {
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
		}
		.hl-div{
			margin-top: 54rpx;
			.hl-item{
				width: 310rpx;
				.hl-img{
					width: 310rpx;
					height: 310rpx;
				}
				.hl-td{
					height: 162rpx;
					width: 310rpx;
					.hl-title{
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
					}
					.hl-num{
						font-weight: bold;
						font-size: 36rpx;
						color: #FC3A30;
					}
					.hl-jf{
						font-weight: bold;
						font-size: 20rpx;
						color: #76706B;
						margin-left: 4rpx;
					}
					.hl-btn{
						width: 144rpx;
						height: 56rpx;
						background: #D1AD7B;
						border-radius: 32rpx 32rpx 32rpx 32rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 56rpx;
						text-align: center;
					}
				}
				
			}
		}
	}
</style>